<%--
  Created by IntelliJ IDEA.
  User: Gridsum
  Date: 2021/8/20
  Time: 16:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url('http://www.sxau.edu.cn/images/2021060316.jpg') no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #login {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background: #eaf1fb;
            opacity: 0.9;
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }


    </style>
</head>
<body>
<div id="login">
    <el-form size="mini" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
        <h1 style="text-align: center;color: black; margin-bottom: 20px">山西农业大学</h1>
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="code">
            <el-radio v-model="ruleForm.code" label="1">学生</el-radio>
            <el-radio v-model="ruleForm.code" label="2">教师</el-radio>
            <el-radio v-model="ruleForm.code" label="3">管理员</el-radio>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    var app = new Vue({
        el: '#login',
        data() {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            return {
                ruleForm: {
                    username: '',
                    password: '',
                    code: '1'
                },
                rules: {
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/admin/adminLogin', this.ruleForm).then(res => {
                            if (res.data.length === 0) {
                                this.$message({
                                    message: '账号或者密码错误',
                                    type: 'error',
                                });
                            } else {
                                // location.href = res.data
                                console.log('data', res.data)
                                const path = res.data[0]
                                location.href = path
                                if (res.data[1].username) {
                                    sessionStorage.setItem('username', res.data[1].username)
                                }

                                this.$message({
                                    message: '登录成功',
                                    type: 'success',
                                });
                            }
                        }).catch(err => {

                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>

</body></html>
